<template>
  <div id="ArticleText">
    <el-affix :offset="0">
      <div id="ArticleTextHead">
        <div id="ArticleTextHeadBack">
          <i class="el-icon-arrow-left"></i>
          文章管理
        </div>
        <el-divider direction="vertical"></el-divider>
        <div id="ArticleTextHeadTitle">
          <el-input
              placeholder="请输入内容"
              v-model="articleTitle"
              maxlength="100"
              show-word-limit></el-input>
          <div id="ArticleTextHeadTitleOperate">
            <el-button type="info" plain>保存草稿</el-button>
            <el-button type="danger" plain>发布文章</el-button>
            <el-avatar size="medium" :src="circleUrl"></el-avatar>
          </div>
        </div>
      </div>
    </el-affix>
    <div id="ArticleTextContent">
      <TextEditor v-model="content"/>
    </div>
  </div>
</template>

<script>
import TextEditor from "@/components/TextEditor";

export default {
  name: "Edit",
  components: {TextEditor},
  data() {
    return {
      articleTitle: "",
      content: "",
      circleUrl: "https://profile.csdnimg.cn/B/4/2/3_kaisarh"
    }
  },
}
</script>

<style lang="scss" scoped>
#ArticleText {
  height: 100vh;
  margin: 0 auto;
  width: 80%;
  position: relative;
  user-select: none;
  display: flex;
  flex-direction: column;

  #ArticleTextHead {
    height: 75px;
    width: 100%;
    //background-color: red;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    z-index: 999;
    background-color: white;

    #ArticleTextHeadBack {
      width: 150px;
      font-weight: bold;
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .el-divider {
      height: 24px;
    }

    #ArticleTextHeadTitle {
      display: flex;
      align-items: center;
      width: 90%;
      //background-color: yellow;
      position: relative;

      .el-input {
        flex: 1;
      }

      #ArticleTextHeadTitleOperate {
        width: 250px;
        margin: 0 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .el-avatar {
          cursor: pointer;
        }
      }
    }
  }

  #ArticleTextContent {
    flex: 1;
    margin-top: 10px;
    width: 100%;
  }
}
</style>
